<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title></title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/bootstrap-responsive.css}" />
    <link rel="stylesheet" type="text/css" th:href="@{/Hospital/Css/style.css}" />
    <script type="text/javascript" th:src="@{/Hospital/Js/jquery.js}"></script>
    <!--<script type="text/javascript" th:src="@{/Js/jquery.sorted.js}"></script>-->
    <script type="text/javascript" th:src="@{/Hospital/Js/bootstrap.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/ckform.js}"></script>
    <script type="text/javascript" th:src="@{/Hospital/Js/common.js}"></script>
    <script th:src="@{/Hospital/layer/layer.js}"></script>

 

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }
        .sidebar-nav {
            padding: 9px 0;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>

</head>
<body>
<form  method="post" id="resource" class="definewidth m20">
<input type="hidden" name="id" value="{$user.id}" />
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">资源名称</td>
            <td><input type="text" id="menuName" name="username"/></td>
        </tr>
        <tr>
            <td class="tableleft">url</td>
            <td><input type="text" id="menuURL" name="password"/></td>
        </tr>
        <tr>
            <td class="tableleft">是否有效</td>
            <td>
                <input type="radio" name="status" value="0" checked/> 有效
                <input type="radio" name="status" value="1" /> 无效
            </td>
        </tr>
        <tr>
            <td class="tableleft"></td>
            <td>
                <button class="btn btn-primary" id="add" type="button">添加</button>&nbsp;&nbsp;<button type="button" class="btn btn-success" name="backid" id="backid">返回列表</button>
            </td>
        </tr>
    </table>
</form>
</body>
</html>
<script>
    //点击事件，返回主页
    $(function () {
        $('#backid').click(function(){
            window.location.href="index";
        });
    });

    //资源名唯一性验证，鼠标移除输入框触发函数
    $("#menuName").blur(function (){

        let menuName = $("#menuName").val();

        $.get("compare",{menuName:menuName},function (data){
            //将服务器回复的结果进行显示
            layer.msg(data.msg);
        })
    })

    //url非空判断，鼠标移除输入框触发函数
    $("#menuURL").blur(function (){

        let menuURL = $("#menuURL").val();
        if (menuURL === ''){
            layer.msg("URL路径不能为空！")
        }
    })

    //点击事件，提交数据
    $(function () {
        $('#add').click(function(){
            //获取参数
            let menuName = $("#menuName").val();
            let menuURL = $("#menuURL").val();
            let status = $("input:radio:checked").val();

            if(confirm("确认添加?")){
                //前端确认添加后，后端进行数据处理
                //先使用layer,弹出load（提示加载中...）
                const windowId = layer.load();//获取加载框
                $.post("addInfo", {menuName:menuName,menuURL:menuURL,status:status},function (data){

                    //关闭load窗口
                    layer.close(windowId);
                    //将服务器回复的结果进行显示
                    layer.msg(data.msg);

                    //添加成功后进行页面跳转
                    if (data.status === 1){
                        window.location.href="index";
                    }

                })
            }
        });
    });

</script>